<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拓扑图制作</title>
<link rel="stylesheet" type="text/css" href="css/detail.css">
    <script src = "js/jquery-1.7.2.min.js"></script>
</head>
<body>
<div class="nodeList">
    <div class="listName">&nbsp;&nbsp;&nbsp;资源列表</div>
    <div class="detail02">
        <div class="detail_title"><p>&nbsp;&nbsp;&nbsp;&nbsp;主机</p><span></span></div>
        <div id="host" class="get_detail">
            <img src="demo_nodes_icon/pc2.png" draggable="true" class="node" title="pc" id="1123" caption="192.168.20.22" data="this is data"/>
            <img src="demo_nodes_icon/pc2.png"  class="node" title="pc" id="11"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/pc2.png"  class="node" title="pc" id="12"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/pc2.png"  class="node" title="pc" id="13"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/pc4.png"  class="node" title="pc" id="14"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/pc4.png" class="node" title="pc" id="15"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/pc4.png"  class="node" title="pc" id="16"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/pc4.png" class="node" title="pc" id="17"  caption="192.168.0.1" data="this is data"/>
        </div>

    </div>
    <div class="detail02">
        <div class="detail_title"><p>&nbsp;&nbsp;&nbsp;&nbsp;网络设备</p><span></span></div>
        <div id="network" class="get_detail">
            <img src="demo_nodes_icon/Exchange2.png"  class="node" title="Exchange" id="18"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/Exchange2.png"  class="node" title="Exchange" id="19"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/Hub2.png" class="node" title="Hub" id="20"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/Hub2.png" class="node" title="Hub" id="21"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/sever2.png"  class="node" title="sever2" id="22"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/sever2.png"  class="node" title="sever2" id="23"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/Router2.png"  class="node" title="firwall" id="24"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/firwall.png"  class="node" title="firwall" id="25"  caption="192.168.0.1" data="this is data"/>
        </div>
    </div>
    <div class="detail02">
        <div class="detail_title"><p>&nbsp;&nbsp;&nbsp;&nbsp;数据库</p><span></span></div>
        <div id="database" class="get_detail">
            <img src="demo_nodes_icon/sun2.png"  class="node" title="pc" id="26"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/sun2.png"  class="node" title="Exchange" id="27"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/IBM2.png"  class="node" title="Exchange" id="28"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/IBM2.png"  class="node" title="Hub" id="29"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/ora.png" class="node" title="Hub" id="30"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/ora.png" class="node" title="Hub" id="31"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/sql.png" class="node" title="sever2" id="32"  caption="192.168.0.1" data="this is data"/>
            <img src="demo_nodes_icon/sql.png"  class="node" title="firwall" id="33"  caption="192.168.0.1" data="this is data"/>
        </div>
    </div>

</div>
<div class="detail_r">
        <div class="tool_bar">
            <span class="default" title="默认"></span>
            <span class="fullscreen" title="全屏"></span>
            <span class="center" title="居中"></span>
            <span class="magnifier" title="放大"></span>
            <span class="shrink" title="缩小"></span>
            <span class="recover" title="1:1"></span>
            <span class="line" title="创建连线"></span>
            <span class="foldline" title="创建L形连线"></span>
            <span class="eagleye" title="鹰眼"></span>
            <select>
                <option value="circlelayout">圆形布局</option>
                <option value="treelayout">树形布局</option>
                <option value="mixedlayout">混合布局</option>
                <option value="autotreelayout">树形布局（全自动）</option>
            </select>
        </div>
    </div>
    <canvas width="800px" height="500px" ondrop="return dragDrop(event)" ondragover="onDragOver(event)"></canvas>
</div>
<script type="text/javascript">
    var css ;
    var background_image ;
    var background_size;
    var isSelected = false;

    $(".tool_bar span").mouseover(function(){
        background_image = $(this).css("background-image");
        background_size = $(this).css("background-size");
        css = $(this).attr("class");
        $(this).attr("class","over");
        $(this).css("background-image",background_image);
        $(this).css("background-size",background_size);
    }).mouseout(function(){
        $(this).removeClass('over');
        $(this).addClass(css);
        $(this).css("background-image",background_image);
        $(this).css("background-size",background_size);
    });

    $(".tool_bar span").click(function(){
        $(this).siblings().removeClass('selected');
        $(this).addClass("selected");
    });

    $(".detail_title span").addClass("down");

    $(".detail_title span").click(function(){
        if($(this).parent().siblings().css('display')=='block'){
            $(this).parent().siblings().hide(300);
            $(this).removeClass("down");
            $(this).addClass("up");
        }else{
            $(this).parent().siblings().show(300);
            $(this).removeClass("up");
            $(this).addClass("down");
        };
    });

    //编写拖拽方法
</script>
</body>
</html>
